/*引入公共方法*/
import { getCookie,delCookie } from '../../assets/js/cookie.js'
export
default{
  data(){
    return {
//        表格增删改查、带分页的表格
      name: '',
      curId: 0,
      rows: [
        {Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生'},
        {Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部'},
        {Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理'},
        {Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙'},
        {Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起'},
        {Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生'},
        {Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部'},
        {Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理'},
        {Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙'},
        {Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起'},
        {Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生'},
        {Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部'},
        {Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理'},
        {Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙'},
        {Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起'},
        {Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生'},
        {Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部'},
        {Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理'},
        {Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙'},
        {Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起'},
      ],
      pagesize: 6,
      curpage: 1,//当前页的页码
      rowtemplate: {Id: 0, Name: '', Age: '', School: '', Remark: ''},
//        购物清单
      productList: [
        {
          'pro_name': '【斯文】甘油 | 丙三醇',//产品名称
          'pro_brand': 'skc',//品牌名称
          'pro_place': '韩国',//产地
          'pro_purity': '99.7%',//规格
          'pro_min': "215千克",//最小起订量
          'pro_depot': '上海仓海仓储',//所在仓库
          'pro_num': 3,//数量
          'pro_img': '../../assets/logo.png',//图片链接
          'pro_price': 800//单价
        },
        {
          'pro_name': '【HS】韩束 | 高锰酸钾',//产品名称
          'pro_brand': 'hansu',//品牌名称
          'pro_place': '韩国',//产地
          'pro_purity': '99.99%',//规格
          'pro_min': "312千克",//最小起订量
          'pro_depot': '上海仓海仓储',//所在仓库
          'pro_num': 1,//数量
          'pro_img': '../../assets/logo.png',//图片链接
          'pro_price': 1200//单价
        }
      ],
//        小目标
      addText:'',
      //name-名称,status-完成状态
      prolist:[
        {name:"HTML5",status:false},
        {name:"CSS3",status:false},
        {name:"vue",status:false},
        {name:"react",status:false}
      ],
      newList:[],
      curIndex:'',
      beforeEditText:"",
      curType:0
    }
  },
  mounted(){
//      退出登录
    /*页面挂载获取保存的cookie值，渲染到页面上*/
    let uname = getCookie('userName')
    this.name = uname
    /*如果cookie不存在，则跳转到登录页*/
    if (uname == "") {
      this.$router.push('/')
    }
//      购物清单
    //为productList添加select（是否选中）字段，初始值为true
    var _this = this;
    //为productList添加select（是否选中）字段，初始值为true
    this.productList.map(function (item) {
      _this.$set(item, 'select', true);
    })
    //要像上面这样写双向绑定才能起效，下面的写法是有问题的，双向绑定不起效的！
    //this.productList.map(function (item) {item.select=true})
//      小目标
    //初始化，把prolist赋值给newList。默认显示所有目标
    this.newList=this.prolist;
  },
  computed: {
//      购物清单
    //检测是否全选
    isSelectAll(){
      //如果productList中每一条数据的select都为true，返回true，否则返回false;
      return this.productList.every(function (val) { return val.select});
    },
    //获取总价和产品总件数
    getTotal(){
      //获取productList中select为true的数据。
      var _proList=this.productList.filter(function (val) { return val.select}),totalPrice=0;
      for(var i=0,len=_proList.length;i<len;i++){
        //总价累加
        totalPrice+=_proList[i].pro_num*_proList[i].pro_price;
      }
      //选择产品的件数就是_proList.length，总价就是totalPrice
      return {totalNum:_proList.length,totalPrice:totalPrice}
    },
//      小目标
    //计算属性，返回未完成目标的条数，就是数组里面status=false的条数
    noend(){
      return this.prolist.filter(function(item){
        return !item.status
      }).length;
    }
  },
  methods: {
//      退出登录
    logout(){
      this.$http.post('/asyysy/asyysy_core/api/user/logout').then((res) => {
        console.log(res)
        delCookie('username')
        this.$router.push({name:'Login'});
        if (res.bodyText == "用户未登录") {
          setTimeout(function () {
            this.$router.push('/')
          }.bind(this), 1000)
        }
      })
    },
//      表格增删改查、带分页的表格
    Save(event) {
      if (this.rowtemplate.Id == 0) {
        //设置当前新增行的Id
        this.rowtemplate.Id = this.rows.length + 1;
        this.rows.push(this.rowtemplate);
      }
      //还原模板
      this.rowtemplate = {Id: 0, Name: '', Age: '', School: '', Remark: ''}
    },
    Delete (id) {
      //实际项目中参数操作肯定会涉及到id去后台删除，这里只是展示，先这么处理。
      for (var i = 0; i < this.rows.length; i++) {
        if (this.rows[i].Id == id) {
          this.rows.splice(i, 1);
          break;
        }
      }
    },
    Edit (row) {
      this.rowtemplate = row;
    },
    //上一页方法
    PrePage (event) {
      $(".pagination .active").prev().trigger("click");
    },
    //下一页方法
    NextPage (event) {
      $(".pagination .active").next().trigger("click");
    },
    //点击页码的方法
    NumPage (num, event) {
      if (this.curpage == num) {
        return;
      }
      this.curpage = num;
      $(".pagination li").removeClass("active");
      if (event.target.tagName.toUpperCase() == "LI") {
        $(event.target).addClass("active");
      }
      else {
        $(event.target).parent().addClass("active");
      }
      if (this.curpage == 1) {
        $("#prepage").addClass("disabled");
      }
      else {
        $("#prepage").removeClass("disabled");
      }
      if (this.curpage == Math.ceil(this.rows.length / this.pagesize)) {
        $("#nextpage").addClass("disabled");
      }
      else {
        $("#nextpage").removeClass("disabled");
      }
    },
//      购物清单
    //全选与取消全选
    selectProduct(_isSelect){
      //遍历productList，全部取反
      for (var i = 0, len = this.productList.length; i < len; i++) {
        this.productList[i].select = !_isSelect;
      }
    },
    //删除已经选中(select=true)的产品
    deleteProduct () {
      this.productList=this.productList.filter(function (item) {return !item.select})
    },
    //删除单条产品
    deleteOneProduct (index) {
      //根据索引删除productList的记录
      this.productList.splice(index,1);
    },
//      小目标
    addList(){
      //添加进来默认status=false,就是未完成状态
      this.prolist.push({
        name:this.addText,
        status:false
      });
      //添加后，清空addText
      this.addText="";
    },
    chooseList(type){
      //type=1时，选择所有目标
      //type=2时，选择所有已完成目标
      //type=3时，选择所有未完成目标
      this.curType=type;
      switch(type){
        case 1:this.newList=this.prolist;break;
        case 2:this.newList=this.prolist.filter(function(item){return item.status});break;
        case 3:this.newList=this.prolist.filter(function(item){return !item.status});break;
      }
    },
    /*改变单条数据的完成状态*/
    changeType(index){
      this.newList[index].status=!this.newList[index].status;
      //更新数据
      this.chooseList(this.curType);
    },
    delectList(list){
      var index=this.prolist.indexOf(list);
      //根据索引，删除数组某一项
      this.prolist.splice(index,1);
      //更新newList  newList可能经过this.prolist.filter()赋值，这样的话，删除了prolist不会影响到newList  那么就要手动更新newList
      //this.newList=this.prolist;
      this.chooseList(this.curType);
    },
    //修改前
    editBefore(name){
      //先记录当前项（比如这一项，{name:"HTML5",status:false}）
      //beforeEditText="HTML5"
      this.beforeEditText=name;
    },
    //修改完成后
    edited(){
      //修改完了，设置curIndex=""，这样输入框就隐藏，其它元素就会显示。因为在li元素 写了：:class="{'eidting':curIndex===index}"  当curIndex不等于index时，eidting类名就清除了！
      //输入框利用v-model绑定了当前项（比如这一项，{name:"HTML5",status:false}）的name,当在输入框编辑的时候，比如改成‘HTML’,实际上当前项的name已经变成了‘HTML’，所以，这一步只是清除eidting类名，隐藏输入框而已
      //还有一个要注意的就是虽然li遍历的是newList，比如改了newList的这一项（{name:"HTML5",status:false}），比如改成这样（{name:"HTML",status:true}）。实际上prolist的这一项（{name:"HTML5",status:false}），也会被改成（{name:"HTML",status:true}）。因为这里是一个对象，而且公用一个堆栈！修改其中一个，另一个会被影响到
      this.curIndex="";
    },
    //取消修改
    cancelEdit(val){
      //上面说了输入框利用v-model绑定了当前项（比如这一项，{name:"HTML5",status:false}）的name,当在输入框编辑的时候，比如改成‘HTML’,实际上当前项的name已经变成了‘HTML’，所以，这一步就是把之前保存的beforeEditText赋值给当前项的name属性，起到一个恢复原来值得作用！
      val.name=this.beforeEditText;
      this.curIndex="";
    }
  },
  directives:{
    "focus":{
      update(el){
        el.focus();
      }
    }
  }
}
